import React, { Component } from "react";
//引入css
import "./Middle.css";
//引入protypes校验
import PropTypes from "prop-types";

class Middle extends Component {
	//给实例对象 添加 静态属性

	// 校验数据类型: string、bool、number、object、array、func还有element(react元素)
	//  必须传递:  isRequired
	static propTypes = {
		middleArr: PropTypes.array.isRequired,
		str: PropTypes.string,
		checked: PropTypes.func.isRequired,
	};

	//定义props默认数据
	static defaultProps = {
		str: "这是middle组件中的数据",
	};

	render() {
		// console.log(this.props);
		let { middleArr, checked } = this.props;
		return (
			<div className="middle">
				<ul>
					{middleArr.map((item, index) => {
						return (
							<li onClick={checked(index)} key={index}>
								<h1>{item.title}</h1>
								{item.checked ? <h2>{item.position}</h2> : null}
							</li>
						);
					})}
				</ul>
			</div>
		);
	}
}

export default Middle;
